import {Alert, ImageBackground, StyleSheet, View} from "react-native";
import {Avatar, Button, Card, Text, TextInput} from 'react-native-paper';
import {useState} from "react";
import {LoginReq} from "../../api/api";
import {UserType} from "../../api/type";
import {setStorage} from "../../util/storageUtil";
interface props{
    closeLogin:(visible:boolean)=>void
    userDetail?:UserType
}
const Login = function ({closeLogin,userDetail}:props){
    const [password, setPassword] = useState<string>('admin123');
    const [userName,setUserName] = useState<string>('admin')

    const login =async function () {
        const res:{code:number,data:UserType}= await LoginReq(userName,password)
        if (res.code==20000){
            await setStorage("userDetail", res.data)
            await setStorage("token", res.data.token)
            closeLogin(false)
        }
    }

    const LeftContent = (props:any) => <Avatar.Icon {...props} icon="account-star" />
    return(
        <>
            <ImageBackground source={{uri:'https://yanglelelele.vip/myblog/ReactNative/labi/img.png'}} style={styles.box}>
                <View style={styles.icon}>
                    <Avatar.Image size={80} source={{uri:'https://yanglelelele.vip/myblog/QQ%E5%9B%BE%E7%89%8720210622124550.png'}} />
                </View>
                <View style={styles.form}>
                    <View style={styles.userName}>
                        <TextInput
                            mode="outlined"
                            placeholder="请输入账户名"
                            defaultValue={userName}
                            autoCorrect={false}
                            onChangeText={setUserName}
                            left={<TextInput.Icon icon="account-box" />}

                        />

                    </View>
                    <View style={styles.password}>
                        <TextInput
                            mode="outlined"
                            defaultValue={password}
                            autoCorrect={false}
                            secureTextEntry={true}
                            placeholder="请输入密码"
                            onChangeText={setPassword}
                            left={<TextInput.Icon icon="biohazard" />}
                        />
                    </View>
                    <View style={styles.loginButton}>
                        <Button icon="login" mode="contained" onPress={ async ()=>{await login()}}>登录</Button>
                    </View>
                </View>
            </ImageBackground>
        </>
    )
}
const styles = StyleSheet.create({
    box:{
        width:'100%',
        backgroundColor:'#baa9e5',
        flex:1,
        alignItems:'center',

    },
    icon: {
        flex:4,
        justifyContent:'flex-end',
    },
    iconText: {
        color:'white'
    },
    form: {
        marginTop:20,
        width:'80%',
        flex:5,
        alignItems:'center',
    },
    userName: {
        width:'100%'
    },
    password: {
        width:'100%'
    },
    loginButton: {
        marginTop:20,
        width:'60%'
    },
});
export {Login}